import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtDivider, AtIcon } from 'taro-ui'
import styles from './index.module.less'

export default class extends Component {

    constructor(props) {
        super(props)

        this.state = {
            open: false
        }
    }

    handleDividerClick() {
        this.setState(preState => ({ open: !preState.open }))
    }


    render() {
        return (
            <View className={styles.container}>
                <AtDivider className={styles.divider} lineColor='#c8c9cc'>
                    <View className={styles.dividerTitle} onClick={this.handleDividerClick.bind(this)}>
                        价格说明
                                <AtIcon value={this.state.open ? 'chevron-up' : 'chevron-down'} size='14' color='#c8c9cc' />
                    </View>
                </AtDivider>
                {
                    this.state.open && (
                        <View className={styles.priceDeclar}>
                            <View className={styles.paragraph}>
                                <Text className={styles.emphasize}>划线的价格：</Text>
                                        可能是课程的原价、曾经展示过的销售价等，仅供您参考。
                                    </View>
                            <View className={styles.paragraph}>
                                <Text className={styles.emphasize}>未划线的价格：</Text>
                                        是课程的销售标价，具体的成交价格可能因会员使用优惠券、积分等发生变化，最终以订单结算价格为准。
                                    </View>
                            <View className={styles.paragraph}>
                                *此说明仅当出现价格比较时有效。若课程针对划线价格进行了特殊说明，以特殊说明为准。
                                    </View>
                        </View>
                    )
                }
            </View>
        )
    }
}
